<template>
	<div>
		
	    <Row :gutter="16" >
	        <Col span="8" style="border-right: 1px dotted #e9eaec">
	            <div>
	            	<ButtonGroup>
				        <Button @click="changeType(1)" :class="{active:formValidateCate.type===1}">新闻分类</Button>
				        <Button @click="changeType(2)" :class="{active: formValidateCate.type===2}">上传分类</Button>
				        <Button @click="changeType(3)" :class="{active:formValidateCate.type===3}">产品分类</Button>
				    </ButtonGroup>
				    <Tree :data="baseData"  @on-select-change="changeSelect"></Tree>
				    <Button type="primary" icon="plus" @click="add">添加</Button>
				    <Button type="primary" icon="edit" @click="edit">修改</Button>
				    <Button type="primary" icon="close" @click="dele">删除</Button>
	            </div>
	        </Col>
	        <Col span="16">
	            <div>
	            	    <Form ref="formValidateCate" :model="formValidateCate"  :label-width="80">
	            	    	
					        <FormItem label="标题" prop="title">
					            <Input v-model="formValidateCate.title" placeholder="请输入"></Input>
					        </FormItem>
					        <FormItem label="ID" prop="id">
					            <Input v-model="formValidateCate.id"  placeholder="请输入"></Input>
					        </FormItem>
					        <FormItem label="type" prop="type">
					            <Input v-model="formValidateCate.type"  placeholder="请输入"></Input>
					        </FormItem>
					        <FormItem label="parentId" prop="parentId">
					            <Input v-model="formValidateCate.parentId"  placeholder="请输入"></Input>
					        </FormItem>
					        <FormItem label="expand" prop="expand">
					            <Input v-model="formValidateCate.expand"   placeholder="请输入" ></Input>
					        </FormItem>
					        <FormItem>
					            <Button type="primary" @click="handleSubmit('formValidateCate')">提交</Button>
					            <Button type="ghost" @click="handleReset('formValidateCate')" style="margin-left: 8px">重置</Button>
					        </FormItem>
					    </Form>
	            </div>
	        </Col>
	    </Row>
	</div>
</template>
<script>
	import Base from '../../common/Base.js';

	export default{
		mixins:[Base],
		data (){
			return{
			}
		},
		methods:{
			changeType(type){//改变数结点类型
				this.formValidateCate.type=type;
				this.getTree(type);
			},
			add(){//添加结点
				if(this.formValidateCate.id1==''){
					this.$Message.error('请选择类型');
				}else{
					this.formValidateCate.parentId=this.formValidateCate.id1;
					this.formValidateCate.type=this.formValidateCate.type1;
					this.formValidateCate.id='';
					this.formValidateCate.title='';
					this.formValidateCate.expand='true';
				}
				
			},
			edit(){//修改结点
				if(this.formValidateCate.id1==''){
					this.$Message.error('请选择修改的数据');
				}else{
					this.formValidateCate.parentId=this.formValidateCate.parentId1;
					this.formValidateCate.type=this.formValidateCate.type1;
					this.formValidateCate.id=this.formValidateCate.id1;
					this.formValidateCate.title=this.formValidateCate.title1;
					this.formValidateCate.expand='true';
				}
				
			},
			dele(){//删除结点
				if(this.formValidateCate.id1==''){
					this.$Message.error('请选择删除的数据');
				}else{
					this.$http({
						method:'DELETE',
						url:'http://localhost:3000/cate/data/'+this.formValidateCate.id1
					}).then(res=>{
						this.getTree();
						this.$Message.success('删除成功!');
					})
				}
			},

			handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                    	if(this.formValidateCate.id!=''){//有id的时候则为编辑修改数据
                    		this.$http({
                    			method:'POST',
                    			url:'http://localhost:3000/cate/data/'+this.formValidateCate.id,
                    			data:this.formValidateCate
                    		}).then(res=>{
                    			this.getTree();
                    			this.$Message.success('提交成功!');
                    			this.handleReset('formValidateCate');
                    		});
                    	}else{//没有id的时候则为添加数据
                    		this.$http({
                    			method:'POST',
                    			url:'http://localhost:3000/cate/data',
                    			data:this.formValidateCate
                    		}).then(res=>{
                    			this.getTree();
                    			this.$Message.success('提交成功!');
                    			this.handleReset('formValidateCate');
                    		})
                    	}   
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
		},
		created(){
			this.getTree();
		}
	}
</script>
<style scoped>
	.active{
		background-color: #2d8cf0;
		color:#fff;
	}
</style>